<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/goods/goods_list.css" />
	<script type="text/javascript">
		(function () {
			var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
			clientWidth = clientWidth || localStorage.getItem("clientWidth")
			if (clientWidth > 750)
				clientWidth = 750;
			document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
		})();
	</script>
</head>

<body>
	<div class="ptsp_top_stats"></div>
	<header class="mui-bar mui-bar-nav" style="z-index: 10000;">
		<a class="mui-action-back mui-icon  mui-pull-left">
			<img src="../images/ptsp/left_arr_03.png" alt="">
		</a>
		<h1 class="mui-title">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll top_nav">
					<span  v-for="i in class_arr" v-html="i.name" @click="tap_class(event,i.id)"></span>
				</div>
			</div>
		</h1>
	</header>
	<div class="mui-content">
		
	</div>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js"></script>

	<script type="text/javascript">
		var tab = new Vue({
			el: 'header',
			data: {
				class_arr:[
					{
						name:'分类1',
						id:'1'
					},
					{
						name:'分类2',
						id:'2'
					},
					{
						name:'分类3',
						id:'3'
					},
					{
						name:'分类4',
						id:'4'
					},
					{
						name:'分类5',
						id:'5'
					},
					{
						name:'分类6',
						id:'6'
					}
				]
			},
			methods: {
				tap_class:function(e,id){
					document.querySelector(".ptsp_active").className = "";
					e.target.className="ptsp_active";
					localStorage.setItem("now_goods_class_id",id);
					if(plus){
						plus.webview.getWebviewById("goods_list_sub.html").reload();
					}
				}
			},
			mounted:function(){
				document.querySelector(".top_nav span:first-child").className = "ptsp_active"

			}
		});
	 
		//启用双击监听
		mui.init({
			gestureConfig: {
				doubletap: true
			},
			subpages: [{
				url: 'goods_list_sub.html',
				id: 'goods_list_sub.html',
				styles: {
					top: '28px',
					bottom: '0px',
				}
			}]
		});
		var options = {
			scrollY: false, //是否竖向滚动
			scrollX: true, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: false, //是否显示滚动条
			deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}
		mui('.mui-scroll-wrapper').scroll(options);

	</script>
</body>

</html>